
/* 创建文件夹 */
<template>
	<div class="create-folder">
		<el-dialog
			title="新建文件夹"
			visible
			@close="$emit('close')"
		>
			<el-form>
				<el-form-item label="文件夹名">
					<el-input
						v-model="folderName"
						autocomplete="off"
					/>
				</el-form-item>
			</el-form>
			<div
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="$emit('close')">取 消</el-button>
				<el-button
					type="primary"
					@click="onclickSure"
				>
					确 定
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getPublicUploadSign } from '@exploit/api/file'
import { cosUpload } from '@/utils/file'
import { basePath } from '@exploit/utils/file'

export default {
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      folderName: ''
    }
  },
  methods: {
    /**
     * 点击确认，创建文件夹，利用cos上传文件，文件名以/结尾
     */
    async onclickSure() {
      if (this.folderName) {
        const sign = await getPublicUploadSign(`/${ basePath }${ this.url }${ this.folderName }/`)

        cosUpload(null, sign.data)
          .then(() => {
            this.$emit('createFinish')
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.create-folder {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>
